<template>
    <div class="rx-search">
        <input type="text" 
        :placeholder="placeholder"
         v-model="searchValue"
         :maxlength="maxlength" 
         :minlength="minlength"
         @focus="activation"
         @blur="activation"
         :class="isActive?'rx-search-active':''"
         >
         <span @click="search">
           搜索
         </span>
    </div>
</template>
<script>
export default {
  name: "rx-search",
  props: {
    placeholder: {
      type: String,
      defalut: "学员姓名/学号/电话"
    },
    maxlength: {
      type: Number,
      default: 15
    },
    minlength: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      searchValue: "",
      isActive: false
    };
  },
  methods: {
    search() {
      this.$emit("input", this.searchValue);
    },
    activation() {
      this.isActive = !this.isActive;
    }
  }
};
</script>
<style lang="scss">
.rx-search {
  display: inline-block;
  width: 280px;
  height: 34px;
  white-space: normal;
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  input {
    float: left;
    width: calc(100% - 48px);
    height: 100%;
    border: none;
    text-indent: 10px;
    vertical-align: top;
    border: 1px solid rgba(193, 196, 214, 1);
    border-radius: 4px 0 0 4px;
    outline: none;
  }
  span {
    float: right;
    width: 47px;
    height: 100%;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    border: 1px solid rgba(193, 196, 214, 1);
    border-left: none;
    line-height: 32px;
    border-radius: 0px 4px 4px 0px;
    margin-right: 1px;
    cursor: pointer;
    &:hover {
      background-color: #6575f6;
      color: #ffffff;
    }
  }
  .rx-search-active {
    border-radius: 4px 0px 0px 4px;
    border: 1px solid rgba(101, 117, 246, 1);
  }
}
</style>
